<template>
  <div class="header-crumb">
    <div class="breadcrubms">
      <el-breadcrumb separator="->">
        <template v-for="item in breadcrubms" :key="item.name">
          <el-breadcrumb-item :to="item.path">
            {{ item.name }}
          </el-breadcrumb-item>
        </template>
      </el-breadcrumb>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'
import { mapPathToBreadcrumb } from '@/utils/activeRoutes'
import { useLoginStore } from '@/store/login/login'
import { computed } from 'vue'
const route = useRoute()
const menu = useLoginStore().userMenus
const breadcrubms = computed(() => {
  return mapPathToBreadcrumb(route.path, menu)
})
</script>

<style lang="less" scoped>
.header-crumb {
}
</style>
